<!-- 信息中心 -->
<template>
  <div class="message-center">
    <!-- 信息中心的标题 -->
    <div class="message-center__title">
      <h2>信息中心</h2>
    </div>
    <!-- 信息中心的内容 -->
    <div class="message-center__content">
      <!-- 如果没实名，则展示上传身份证信息区域 -->
      <div class="message-center__upload" v-if="!imageUrl">
        <span>
          您还没有实名信息，点击
          <i class="el-icon-upload avatar-uploader-icon">上传</i>
          身份证照片
        </span>
        <el-upload class="avatar-uploader" action="http://localhost:8081/oos/uploadImg" :on-success="uploadSuccess">
          <i class="el-icon-upload avatar-uploader-icon">上传</i>
        </el-upload>
      </div>
      <!-- 基本信息 -->
      <div class="message-center__basic">
        <el-divider content-position="left">基本信息</el-divider>
        <div class="message-center__basic--content">
          <el-upload class="avatar-uploader" v-if="changeImgFlag || !headImg" action="http://localhost:8081/oos/uploadImg" :on-success="uploadHeadSuccess">
            <img v-if="headImageUrl" alt="点击修改头像" :src="headImageUrl" class="avatar" />
            <i v-else class="el-icon-picture avatar-uploader-icon">头像</i>
            <el-button slot="tip" type="text" class="el-upload__tip" style="display:block" @click="handleClick">取消修改</el-button>
          </el-upload>
          <div class="content__headImg" @click="handleClick" v-else>
            <el-tooltip class="item" effect="dark" content="点击修改头像" placement="top-start">
              <img :src="headImg" width="120px" height="120px" />
            </el-tooltip>
          </div>
          <el-form ref="basicForm" :rules="rules" :model="basicForm" label-width="150px" size="mini">
            <el-form-item label="姓名" prop="name">
              <el-input v-model.trim="basicForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="basicForm.sex" placeholder="请选择性别">
                <el-option label="男" value="man"></el-option>
                <el-option label="女" value="woman"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker type="date" placeholder="选择日期" v-model="basicForm.birth" :picker-options="pickerOption" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="身份证号" prop="id">
              <el-input v-model.trim="basicForm.id"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model.trim="basicForm.phone"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 住房信息 -->
      <div class="message-center__room">
        <el-divider content-position="left">住房信息</el-divider>
        <div class="message-center__room-content">
          <el-form ref="roomForm" :model="roomForm" label-width="100px" size="mini">
            <el-form-item label="户主名">
              <div>{{roomForm.name}}</div>
            </el-form-item>
            <el-form-item label="具体住址">
              <div>{{roomForm.position}}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 信息中心的提交 -->
    <div class="message-center__submit">
      <el-button type="primary" @click="update('basicForm')">保存</el-button>
    </div>
  </div>
</template>

<script>
import tools from '../utils';
import { updateUser, getBuildingByOwnerId } from '../api/index';
export default {
  name: '',
  data() {
    return {
      loadFlag: true,
      imageUrl: '',
      headImg: '',
      headImageUrl: '',
      changeImgFlag: false,
      basicForm: {
        name: '',
        sex: '',
        birth: '',
        id: '',
        phone: '',
      },
      roomForm: {
        name: '',
        position: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        id: [{ required: true, validator: tools.validateIdCard, trigger: 'blur' }],
        phone: [{ required: true, validator: tools.validatorPhone, trigger: 'blur' }],
      },
      pickerOption: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
    };
  },
  components: {},
  computed: {},
  created() {
    this.getUserInfo();
    this.getBuildingMsg();
  },
  beforeMount() {},
  mounted() {},
  methods: {
    // 获取基本信息
    getUserInfo() {
      this.basicForm = JSON.parse(localStorage.getItem('userInfo'));
      if (this.basicForm.sex == null) {
        this.basicForm.sex = 'man';
      }
      this.imageUrl = this.basicForm.idImg;
      this.headImg = this.basicForm.headImg;
    },
    // 更新信息
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser(this.basicForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: '更新成功！',
                type: 'success',
              });
              localStorage.setItem('userInfo', JSON.stringify(this.basicForm));
            }
          });
        } else {
          return false;
        }
      });
    },
    // 身份证图片成功上传
    uploadSuccess(response) {
      if (response.code === 200) {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        userInfo.idImg = response.data;
        this.basicForm.idImg = response.data;
        updateUser(userInfo).then((res) => {
          this.$message.success('身份证照片上传成功！');
        });
      }
    },
    // 头像图片上传成功
    uploadHeadSuccess(response) {
      if (response.code == 200) {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        userInfo.headImg = response.data;
        this.basicForm.headImg = response.data;
        updateUser(userInfo).then((res) => {
          this.$message.success('头像上传成功！');
        });
      }
    },
    // 切换状态
    handleClick() {
      this.changeImgFlag = !this.changeImgFlag;
    },
    // 住房信息
    getBuildingMsg() {
      let id = JSON.parse(localStorage.getItem('userInfo')).userId;
      getBuildingByOwnerId(id).then((res) => {
        if (res.code == 200) {
          this.roomForm.name = res.data[0].name;
          if (res.data[0].children.length == 0) {
            this.roomForm.position = res.data[0].parentUnit + '幢' + res.data[0].unit + '单元';
          } else {
            this.roomForm.position = res.data[0].parentUnit + '幢';
          }
        }
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.message-center {
  width: 100%;
  .message-center__title {
    width: 100%;
    height: 220px;
    background: url('../assets/imgs/blue_top.png') no-repeat;
    background-size: cover;
    h2 {
      color: #fff;
      font-size: 50px;
      line-height: 220px;
      text-align: center;
      letter-spacing: 0.5rem;
    }
  }
  .message-center__content {
    margin: 50px 220px;
    margin-bottom: 0;
  }
  .message-center__upload {
    margin: 20px;
    height: 220px;
    border: 2px solid #000;
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    span {
      font-size: 25px;
    }
    .avatar-uploader {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }
  }
  .message-center__basic {
    margin: 20px;
    margin-top: 50px;
  }
  .message-center__basic--content {
    border: 1px solid #000;
    display: flex;
    justify-content: flex-start;
    .avatar-uploader,
    img {
      margin-top: 50px;
      margin-bottom: 50px;
      margin-left: 50px;
    }
    .el-form {
      margin-top: 50px;
      margin-left: 50px;
      margin-bottom: 50px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(auto-fill, 60px);
    }
    .content__headImg {
      &:hover {
        cursor: pointer;
      }
    }
  }
  .message-center__room {
    margin: 20px;
    margin-top: 50px;
  }
  .message-center__room-content {
    border: 1px solid #000;
    padding: 50px;
    padding-left: 0;
  }
  .message-center__submit {
    padding: 0 220px;
    margin: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
  background-color: #409eff;
  i {
    color: #fff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.el-divider__text.is-left {
  font-size: 20px;
}
</style>